<template>
  <div class="game">
    <h2>游戏列表</h2>
    <!-- <ul>
      <li v-for="(item, index) in games" :key=index>
        {{ item.title }}
      </li>
    </ul> -->
    <slot name="qwe" :youxi="games" :x="'哈哈'" :z="100"></slot>
  </div>

</template>

<script lang="ts" setup>
import  { reactive } from 'vue'

let games = reactive([
  {
    id: '001',
    title: 'game1111'
  },
  {
    id: '002',
    title: 'game2222'
  },
  {
    id: '003',
    title: 'game3333'
  },
  {
    id: '004',
    title: 'game4444'
  }
])




</script>

<style scoped>
  .game {
    background: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px ;
    padding: 10px;
    width: 200px;
    height: 300px;
  }
  h2 {
    background: orange;
    text-align: center;
  }
</style>